<template>
    <div id="add-edit-model">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="60%" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <router-link :to="{ path: '/your-route', query: { key: 'value' } }">Link Text</router-link>
            <!-- <iframe src="http://8.129.209.198:39056/sms/OperationProcess/obRequestDetail" width="100%" height="500"></iframe> -->
            <template #footer>
                <el-button @click="cancelUseClick">关 闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted , watch } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import JobRequestDetail from '../../OperationProcess/JobRequestDetail.vue';
export default defineComponent( {
    name: 'add-edit-model',
    components: { JobRequestDetail },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            cancelUseClick();
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelDetailClick');
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                titleCon.value = '详情';
            }
        })

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog;
        })

        return {
            handleClose,
            cancelUseClick,
            ruleFormRef,
            titleCon,
            isUseDialog,
        }
    },
} )
</script>
<style scoped lang="scss">
</style>